<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="canvasPaint.js" type="text/javascript"></script>
	<script type="text/javascript" src="canvas2image.js"></script>
    <script type="text/javascript" src="base64.js"></script>
    <script type="text/javascript" src="to64.js"></script>
    <script type="text/javascript">
        var canvasManager;
        $(window).load(function () {
            canvasManager = $(".canvas").canvasPaint();
        });
		
    </script>
	<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="toolsBars">
		<fieldset class="toolsBar">
			<legend>Tools</legend>
			<input type="button" style="background-image: url('images/lapiz.png');" value="lapiz"  onclick="canvasManager.activatePen()" />
			<input type="button" style="background-image: url('images/circulo.png');" value="circulo vacio"  onclick="canvasManager.activateEmptyCircle()" />
			<input type="button" style="background-image: url('images/cuadrado.png');" value="cuadrado vacio"  onclick="canvasManager.activateEmptyRectangle()" />
			<input type="button" style="background-image: url('images/linea.png');" value="linea"  onclick="canvasManager.activateLine()" />
		</fieldset>
	</div>
    <div id="oCanvas" style="width: 100px; height: 100px; border: solid 2px red;position:absolute" class="canvas"></div>
    <div id="texto" > </div>
    <button onClick="envia()">Enviar</button>
    <div id="coord"> </div>
</body>
</html>
